import { useState, useEffect } from 'react';
import { Popover } from 'antd-mobile';
import { InbizIcon, webDataSourceClick } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import { useInbizRouter } from '@inbiz/hooks';
import styles from '../style.less';

export default function Filter(props: any) {
    const { newDataSource, fontSize, controlId, contentType, titleColor } = props;
    const [curSelected, setCurSelected] = useState<any>({});
    const [visiable, setVisiable] = useState(false);
    const history = useInbizRouter();

    useEffect(() => {
        if (newDataSource && newDataSource?.length) {
            setCurSelected(newDataSource?.[0]);
        } else {
            setCurSelected({});
        }
    }, [newDataSource]);

    return (
        <div className={styles['navigation-filter-wrapper']}>
            <Popover
                style={{
                    '--arrow-size': '0px'
                }}
                placement='bottom'
                trigger='click'
                getContainer={() => document.getElementById(`navigation-filter-current-selected-${controlId}`) || document.body}
                onVisibleChange={setVisiable}
                visible={visiable}
                stopPropagation={[]}
                content={<PopoverContent menu={newDataSource} history={history} curSelected={curSelected} setCurSelected={setCurSelected} setVisiable={setVisiable} {...props} />}
            >
                <div
                    className={styles['navigation-filter-current-selected']}
                    style={{ fontSize }}
                    id={`navigation-filter-current-selected-${controlId}`}
                >
                    {curSelected?.icon?.type && contentType !== 2 && (
                        <InbizIcon
                            className={styles['navigation-filter-popover-content-item-icon']}
                            type={curSelected?.icon?.type || 'icon-inbiz_basic-settings'}
                            style={{
                                color: curSelected?.icon?.color || '#999',
                                fontSize: `${curSelected?.icon?.size || 16}px`,
                                margin: '0 10px',
                            }}
                        />
                    )}
                    <div
                        className={styles['navigation-filter-current-selected-title']}
                        style={{
                            fontSize: `${fontSize}px`,
                            color: titleColor,
                            height: '100%',
                        }}
                    >
                        <TextWidget>{curSelected?.title}</TextWidget>
                    </div>
                    <div className={styles['navigation-filter-current-selected-direction']}>
                        {
                            curSelected?.title
                                ?
                                <InbizIcon
                                    type={'icon-ic-arrow-down-bold'}
                                    style={{
                                        fontSize: 14,
                                        color: titleColor,
                                        transform: `rotate(${visiable ? 0 : 180}deg)`,
                                        transition: 'all ease .3s'
                                    }}
                                />
                                :
                                ''
                        }
                    </div>
                </div>
            </Popover>
        </div>
    )
}

function PopoverContent(props: any) {
    const { menu } = props;

    return (
        <div className='navigation-filter-popover-content-wrapper'>
            {
                menu?.map((item: { id: string; }) => {
                    return (
                        <PopoverContentItem key={item?.id} item={item} {...props} />
                    )
                })
            }
        </div>
    )
};

function PopoverContentItem(props: any) {
    const { item, contentType, fontSize, history, emit, curSelected, setCurSelected, setVisiable, titleColor, lineHeight, dropDownLineBackground } = props;

    return (
        <div
            className='navigation-filter-popover-content-item'
            style={{
                background: dropDownLineBackground,
                height: lineHeight,
                lineHeight: lineHeight + 'px',

            }}
            onClick={() => {
                emit && emit('onclick', item);
                webDataSourceClick(history, item, 'hash', () => {
                    setCurSelected(item);
                    setVisiable((pre: boolean) => !pre)
                });
            }}
        >
            {item?.icon?.type && contentType !== 2 && (
                <InbizIcon
                    className={'navigation-filter-popover-content-item-icon'}
                    type={item?.icon?.type || 'icon-inbiz_basic-settings'}
                    style={{
                        color: item?.icon?.color || '#999',
                        fontSize: `${item?.icon?.size || 16}px`,
                        marginRight: 10,
                        minWidth: item?.icon?.size || 16
                    }}
                />
            )}
            {contentType !== 3 && (
                <span
                    className={'navigation-filter-popover-content-item-title'}
                    style={{
                        fontSize: `${fontSize}px`,
                        color: item?.id == curSelected?.id ? 'var(--inbiz-color-primary)' : titleColor,
                    }}
                >
                    <TextWidget>{item?.title}</TextWidget>
                </span>
            )}
        </div>
    )
}